var React = require('react')
  , _ = require('underscore')
  , $ = require('jquery')
var WidgetComponent = React.createClass({
  displayName: 'CardSpec',
  getInitialState:function(){
    return {
      showContent:this.props.useToggle?false:true
    }
  },
  slideDown:function(){
    var _this = this
      , $content = $(this.refs.content)
    if($content.is(':animated')){
      return ;
    }
    $content.slideDown(function(){
      _this.setState({
        showContent:true
      })
    });
  },
  slideUp:function(){
    var _this = this
      , $content = $(this.refs.content)
    if($content.is(':animated')){
      return ;
    }
    $content.slideUp(function(){
      _this.setState({
        showContent:false
      })
    });
  },
  getDefaultProps:function(){
    return {
      title:null,
      className:'widget-normal',
      extra:null
    }
  },
  renderTitle:function(){
    if(this.props.title===null){
      return null;
    }else{
      return (
        this.props.useToggle?(this.state.showContent?(
          <div className="widget-title" onClick={this.slideUp}>
            <div className="float-right">
            {
              <a className="btn-gray btn-sm" href="javascript:;">收起</a>
            }
            </div>
            <h4>{this.props.title}</h4>
          </div>
        ):(
          <div className="widget-title" onClick={this.slideDown}>
            <div className="float-right">
            {
              <a className="btn-blue btn-sm" href="javascript:;">展开</a>
            }
            </div>
            <h4>{this.props.title}</h4>
          </div>
        )):null
      )
    }
  },
  render: function () {
    var contentStyle = {
      display:this.state.showContent?'block':'none'
    }
    return (
      <div className={this.props.className}>
        {
          this.renderTitle()
        }
        <div ref="content" className="widget-content" style={contentStyle}>
          {this.props.children}
        </div>
      </div>
    )
  }
});
module.exports = WidgetComponent;
